<template>
  <div class="app-container">

    
    <!-- <div class="back">
      <el-button type="primary" @click="()=>{this.$router.go(-1)}" icon="el-icon-arrow-left">
          返回
      </el-button>
    </div> -->

    <el-row :gutter="24">
      <el-col :span="24">
        <el-card class="qu-content">
          <div v-if="quData">
            <div class="question-header">
              <!-- <h2>抢答题 {{ currentIndex + 1 }}</h2> -->
              <h2>必答题 {{ currentIndex + 1 }}</h2>
              <div class="timer">剩余时间: {{ minutes }}:{{ seconds }}</div>
            </div>
            
            <div class="question-content">
              <h3>{{ quData.content }}</h3>
              <div v-if="showAnswer" class="answer-content">
                {{ quData.answer }}
              </div>
            </div>
<!-- 
            <div v-if="showAnswer" class="answer-section">
              <el-alert
                title="正确答案"
                type="success"
                :description="quData.answer"
                show-icon
                :closable="false"
              >
              </el-alert>
            </div> -->

            <div class="action-buttons">
              <el-button 
                type="primary" 
                @click="submitAnswer" 
                v-if="!showAnswer"
                size="large"
              >
                确定
              </el-button>
              <el-button 
                type="primary" 
                @click="nextQuestion" 
                v-if="showAnswer && currentIndex < quList.length - 1"
                size="large"
              >
                下一题
              </el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- <el-card style="width: 97.5%; margin-top: 10px;position: fixed; bottom: 10px;opacity: 0.3;">
      <el-button type="primary" @click="()=>this.$router.go(-1)" icon="el-icon-arrow-left">
      </el-button>
      <el-button type="primary" @click="()=>this.$router.push({name:'ListQuick'})" icon="el-icon-arrow-right" style="float: right;">
      </el-button>
    </el-card> -->
    <div class="btn">
      <el-button  @click="()=>this.$router.go(-1)" icon="el-icon-arrow-left">
      </el-button>
      <el-button  @click="()=>this.$router.push({name:'ListQuick'})" icon="el-icon-arrow-right" style="float: right;">
      </el-button>
      <!-- <el-button  @click="()=>this.$router.push({name:'QuickResponder'})" icon="el-icon-arrow-right" style="float: right;">
      </el-button> -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'ResponderState',
  
  data() {
    return {
      currentIndex: 0,
      quList: [
        {
          id: 1,
          content: '1、社区警务工作三大任务是什么？',
          answer: '规定任务、指令任务、推送任务'
        },
        {
          id: 2,
          content: '2、社区民警的主要职责是什么？',
          answer: '管理实有人口、掌握社情民意、组织安全防范、维护社区秩序、服务辖区群众。'
        },
        {
          id: 3,
          content: '3、派出所"两队一室"分别指什么？',
          answer: '社区警务队、案件办理队和综合指挥室'
        }
      ],
      quData: null,
      showAnswer: false,
      timer: null,
      timeLeft: 60, // 60秒答题时间
      minutes: '01',
      seconds: '00'
    }
  },

  created() {
    this.loadQuestion()
  },

  methods: {
    loadQuestion() {
      this.quData = this.quList[this.currentIndex]
      this.showAnswer = false
      this.timeLeft = 60
      this.startTimer()
    },

    startTimer() {
      if(this.timer) {
        clearInterval(this.timer)
      }
      
      this.timer = setInterval(() => {
        this.timeLeft--
        this.minutes = Math.floor(this.timeLeft / 60).toString().padStart(2, '0')
        this.seconds = (this.timeLeft % 60).toString().padStart(2, '0')
        
        if(this.timeLeft <= 0) {
          this.$message.warning('答题时间已到!')
          this.showAnswer = true
          clearInterval(this.timer)
        }
      }, 1000)
    },

    submitAnswer() {
      this.showAnswer = true
      clearInterval(this.timer)
    },

    nextQuestion() {
      this.currentIndex++
      this.loadQuestion()
    }
  },

  beforeDestroy() {
    if(this.timer) {
      clearInterval(this.timer)
    }
  }
}
</script>

<style lang="scss" scoped>

.app-container{
  width: 100%;
  height: 100%;
  background-image: url("/images/bg.png");
  background-size: cover;
}

.back{
  margin-bottom: 10px;
}



.qu-content {
  padding: 30px;

  .question-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;

    h2 {
      margin: 0;
      color: #303133;
    }

    .timer {
      font-size: 24px;
      color: #f56c6c;
      font-weight: bold;
    }
  }

  .question-content {
    margin-bottom: 30px;
    
    h3 {
      font-size: 20px;
      color: #303133;
      margin-bottom: 20px;
      line-height: 1.5;
    }

    .answer-content {
      font-size: 16px;
      line-height: 1.8;
      color: #606266;
      padding: 20px;
      background-color: #f5f7fa;
      border-radius: 4px;
    }
  }

  .answer-section {
    margin: 20px 0;
    
    .el-alert {
      margin-bottom: 20px;
    }
  }

  .action-buttons {
    text-align: center;
    margin-top: 30px;

    .el-button {
      padding: 15px 35px;
      font-size: 16px;
    }
  }

  

}

.btn{
    width: 98%;
    bottom: 20px;
    position: fixed;
    opacity: 0.3;
}

</style>